
Vue.component('alert',{    //全局定义组件
	template:'<button @click="on_click">点我alert</button>',
	methods:{
		on_click: function () {
			alert('Yo.alert');
		}
	}
});


var alerts = {    //局部定义组件
	template:'<button @click="on_click">点我alerts</button>',
	props:['msg'],
	methods:{
		on_click: function () {
			alert(this.msg);
		}
	}
}



Vue.component('like',{
	template:'<button :class="{liked: liked}" @click="toggle_like"> 点赞数： {{like_count}}</button>',
	data: function(){
		return {
			like_count: 10,
			liked: false,
		}
	},
	methods:{
		toggle_like: function(){
			if(!this.liked){
				this.like_count++
			} else {
				this.like_count--
			}
			this.liked=!this.liked
		}
	}
})


//balance 父组件 与  show 子组件之间互相通信

Vue.component('balance',{
	template:`
		<div>
			<show @show-banlance="show_banlance"></show>
			<div v-if="show">
				您的余额：￥98元
			</div>
		</div>
	`,
	methods:{
		show_banlance: function(data){
			this.show = true
			console.log(data)
		}
	},
	data:function(){
		return {
			show : false,
		}
	}
})

Vue.component('show',{
	template:`
		<button @click="on_click()">显示余额</button>
	`,
	methods:{
		on_click(){
			this.$emit('show-banlance',{a:1,b:2})
		}
	}
})


//任意组件之间的调用
var Event = new Vue()  //必须要又一个中间调度器作为数据之间的传输通道


Vue.component('huahua',{
	template:`
		<div>
			我说：<input @keyup="on_change" v-model="i_said" type="text" />{{i_said}}
		</div>
	`,
	methods:{
		on_change:function(){
			Event.$emit('huahua-said-something',this.i_said)
		}
	},
	data: function(){
		return{
			i_said:'',
		}
	}
})

Vue.component('shuandan',{
	template:`
		<div>huahua说：{{huahua_said}}</div>
	`,
	data:function(){
		return{
			huahua_said:'',
		}
	},


	mounted: function(){
		var that = this
		Event.$on('huahua-said-something',function(data){
			console.log(data)
			that.huahua_said = data
		})
	}
})

new Vue({
	el:'.app',
	components: {
		alerts: alerts
	}
})

new Vue({
	el:'.like'
})

new Vue({
	el:'.balance'
})

new Vue({
	el:'.said'
})


